<template>
  <div class="box">
    <h1>组件间通信2: vue自定义事件</h1>
    <!-- 
    区别原生事件与自定义事件
      原生事件
        原生标签上绑定 / 组件标签上绑定加.native(组件内的原生根标签)
        事件名是特定的一些
        事件对象 / $event: 包含事件相关信息的数据对象, 如: pageX/pageY/target/keyCode
      自定义事件
        组件标签上绑定(不加.native)
        事件名是任意名称
        事件对象 / $event: $emit分发时指定的数据, 可以是任意类型, 甚至是undefined

    当我们点击按钮后 => 浏览器识别到了这个操作, 准备分发一个点击事件
        浏览器.分发事件('click', 事件相关的数据的对象)
        浏览器发现我们给button绑定的点击监听, 
          $event = 事件相关的数据的对象
          调用监听回调test1($event)
    自定义事件监听, 必须由我们自己来分发事件
        $emit('事件名', 任意类型的数据)
        $event = 任意类型的数据
        test4($event)
    -->

    <h2>原生事件监听</h2>
    <button @click="test1">原生标签原生DOM事件监听</button>
    <button @click="test2($event, 'atguigu')">原生标签原生DOM事件监听2</button> <!-- 原生标签 -->

    <br>
    <br>
    <Event1 @click.native="test3"/>  <!-- 组件标签 -->

    <br>
    <br>
    <h2>自定义事件监听</h2>
    <Event2 @click="test4" @xxx="test4($evnt)"/>

  </div>
</template>

<script type="text/ecmascript-6">
  import Event1 from './Event1.vue'
  import Event2 from './Event2.vue'

  export default {
    name: 'EventTest',

    data () {
      return {
        count: 0
      }
    },

    components: {
      Event1,
      Event2,
    },

    methods: {
      test1 (event) {
        alert(event.target.innerHTML)
      },

      test2 (e, msg) {
        alert(e.target.innerHTML + '--' + msg)
      },

      test3 (event) {
        alert(event.currentTarget.innerHTML)
      },

      test4 (event) {
        alert(event)
      },
    }
  }
</script>
